<template>
    <div>
        <!-- 导航部分开始 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>质量管理</el-breadcrumb-item>
            <el-breadcrumb-item>测试项管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 导航部分结束 -->
        <!--  搜索栏开始 -->
        <el-form style="margin-top: 15px;" :inline="true" :model="queryIndex" class="demo-form-inline">
            <el-form-item label="检测项编码">
                <el-input v-model="queryIndex.indexCode" placeholder="检测项编码" clearable />
            </el-form-item>
            <el-form-item label="检测项名称">
                <el-input v-model="queryIndex.indexName" placeholder="检测项名称" clearable />
            </el-form-item>
            <el-form-item label="检测项类型">
                <el-select v-model="queryIndex.indexType" class="m-2" placeholder="Select" size="large">
                    <el-option v-for="item in indexTypeDate" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadDicts">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="resetting">重置</el-button>
            </el-form-item>
        </el-form>
        <!--  搜索栏结束 -->

        <!-- 工具栏开始 -->
        <div class="flex">
            <el-button title="新增检测项" @click="this.addIndexDialogVisible = true" type="primary">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-button>
        </div>
        <!-- 工具栏结束 -->

        <!-- 表格 开始 -->
        <el-table ref="dictTable" :data="indexs" max-height="800px" stripe="true" border="true"
            style="width: 90%;margin-top: 10px;">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="检测项编码" property="indexCode" />
            <el-table-column align="center" label="检测项名称" property="indexName" />
            <el-table-column align="center" label="检测项类型" property="indexType" />
            <el-table-column align="center" label="检测项工具" property="qcTool" />
            <el-table-column width="150" align="center" label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
                        @confirm="handleDelete(scope.row.indexId)" title="您是否要删除这行数据">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格 结束 -->

        <!-- 分页栏开始 -->
        <el-pagination style="margin-top: 15px;" :page-size="indexLimit" :pager-count="indexMaxPage"
            @current-change="changePage" background layout="prev, pager, next" :total="indexTotal" />
        <!-- 分页栏结束 -->

        <!-- 添加缺陷的弹窗窗体开始-->
        <el-dialog v-model="addIndexDialogVisible" title="添加检测项" width="600" align-center>
            <!-- 添加缺陷的表单 -->
            <el-form label-width="100px" :model="newIndex" style="max-width: 460px">
                <el-form-item label="检测项编码">
                    <el-input v-model="newIndex.indexCode" />
                </el-form-item>
                <el-form-item label="检测项名称">
                    <el-input v-model="newIndex.indexName" />
                </el-form-item>
                <el-form-item label="检测项类型">
                    <el-select v-model="newIndex.indexType" class="m-2" placeholder="Select" size="large">
                        <el-option v-for="item in indexTypeDate" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="检测项工具">
                    <el-input v-model="newIndex.qcTool" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAddIndex">取消</el-button>
                    <el-button type="primary" @click="doAddIndex">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加字典的弹窗窗体结束-->

    </div>
</template>

<script>
import qcIndexRequst from '../../api/qc-index.js'
export default {
    data() {
        return {
            queryIndex: {},// 分装查询检测项条件的检测对象
            indexs: [],//缺陷数据列表
            indexCurrPage: 1, // 检测项分页的当前页码
            indexLimit: 10, // 检测项分页的每页大小
            indexTotal: 0, // 检测项列表的总条数
            indexMaxPage: 1,// 检测项列表的最大页码
            //模拟数据库缺陷类型表
            indexTypeDate: [{ value: '尺寸', label: '尺寸' }, { value: '外观', label: '外观' }, { value: '重量', label: '重量' },
            { value: '性能', label: '性能' }, { value: '成分', label: '成分' }, { value: '安全', label: '安全' },],
            //新增检测项相关属性
            addIndexDialogVisible: false,//新增检测项弹窗
            newIndex: {},//新增检测项对象
        }
    },
    methods: {
        resetting() {
            qcIndexRequst.list(this.indexCurrPage, this.indexLimit, this.queryIndex = {}, res => {
                // 设置数据
                this.indexs = res.data.list;
                this.indexTotal = res.data.total;
                this.indexMaxPage = res.data.pages;
            });
        },
        loadIndexs() {
            qcIndexRequst.list(this.indexCurrPage, this.indexLimit, this.queryIndex, res => {
                // 设置数据
                this.indexs = res.data.list;
                this.indexTotal = res.data.total;
                this.indexMaxPage = res.data.pages;
            });
        }
    },
    mounted() {
        // 默认加载字典数据列表
        this.loadIndexs();
    }
}
</script>

<style scoped></style>